{% autoescape off %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <title>应用配置管理系统</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
    <!-- ECharts单文件引入 -->
    <script src="/static/js/echarts.js"></script>
    <script src="/static/js/timelineOption.js"></script>
    <script type="text/javascript">
	
	
        // 路径配置
        require.config({
            paths: {
                echarts: '/static/js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/pie',
                'echarts/chart/line' // 加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
		
        
        var option = {
     timeline:{
        data:[
        {% for Updatemonth in Updatemonth_list %}
			'{{ Updatemonth }}',
        {% endfor %} 
        ],
        label : {
            formatter : function(s) {
                return s.slice(0, 7);
            }
        },
        autoPlay : true,
        playInterval : 1500
    },
    options:[
        {
            title : {
			    'text':'中心系统升级指标',
            },
            tooltip : {'trigger':'axis'},
            legend : {
                x:'right',
                'data':['升级次数'],
            },
            toolbox : {
                'show':true, 
                orient : 'vertical',
                x: 'right', 
                y: 'center',
                'feature':{ 
                    'dataZoom' : {'show': true},
                    'magicType':{'show':true,'type':['line','bar']},
                    'restore':{'show':false},
                    'saveAsImage':{'show':true}
                }
            },
            dataZoom: {
                show: true,
                start : 0,
                end : 100,
                dataBackgroundColor :'rgba(0,0,0,0)'
                
            },
            calculable : true,
            grid : {'y':80,'y2':100},
            xAxis : [{
                'type':'category',
                'axisLabel':{'interval':0,rotate: 30,margin: -66,},
                'data':[
					{% for appName in AppName_list %}
						'{{ appName }}',
					{% endfor %} 
                ]
            }],
            
            
            yAxis : [
                {
                    'type':'value',
                    'name':'升级次数',
                },
                
            ],
            series : [
                {
                    'name':'升级次数',
                    'type':'bar',
                    'markLine':{
                        symbol : ['arrow','none'],
                        symbolSize : [4, 2],
                        precision : 3,
                        itemStyle : {
                            normal: {
                                
                                lineStyle: {color:'orange'},
                                barBorderColor:'orange',
                                label:{
                                    position:'left',
                                    textStyle:{color:'blue'}
                                }
                            }
                        },
                        'data':[{'type':'average','name':'平均值'}]
                    },
                    'data': {{ update_counts_list_1 }}
                },
                
            ]
        },
        {% for data_list in update_counts_list %}
        {
        
            title : {'text':'中心系统升级指标'},
       
            series : [
                {
                	'data': {{ data_list }}
                }
                
            ]
        
        },
        {% endfor %}
        
    ]
};

        // 为echarts对象加载数据 

		
		myChart.setOption(option);
		
		}
		);
		
	
	
	
    </script>
    <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
		<a href="/upload_file/">| 文件上传</a> |
		<a href="/system_detail/">系统详情页</a> |
		<a href="/version_detail/">版本详情页</a> |
		<a href="/wiki_index/">系统百科页</a> |
		<a href="/dataex_detail/">交互信息展示页</a> |
		<a href="/cm_baseline/">基线展示页</a> |
		<a href="/cm_bi_index/">报表展示页</a> |
		<a href="/test_report_index/">测试周报页</a> |
	</div>
</body>
{% endautoescape %}